<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 重置默认样式 */
			* {
			  margin: 0;
			  padding: 0;
			  box-sizing: border-box;
			}			
			/* 视频背景样式 */
			.video-wrap {
			  position: fixed;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  overflow: hidden;
			}			
			.video-wrap__video {
			  min-width: 100%;
			  min-height: 100%;
			  width: auto;
			  height: auto;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			}
			/* 注册表单样式 */
			.register_box {
			  position: relative; /* 相对定位 */
			  z-index: 1; /* 设置堆叠顺序 */
			  padding: 20px; /* 内边距 */
			  margin: 150px auto 0; /* 水平居中 */
			  width: 320px; /* 宽度 */
			}			
			.register_box p {
			  margin: 10px 0; /* 上下外边距 */
			}		
			.register_title .p_one{
				font-size: 34px;
				font-weight: 500;
				line-height: 57px;
				color: #000;
				margin-bottom: 8px;
			}
			.register_title .p_two{
				font-size: 18px;
				line-height: 23.4px;
				color: #000;
				margin-bottom: 32px;
			}
			.input_box {
			  margin: 10px 0; /* 上下外边距 */
			}			
			.input_box input {
			  width: 320px; /* 宽度 */
			  padding: 8px; /* 内边距 */
			  line-height: 18px;
			  border: 0.8px solid #ccc; /* 边框 */
			  border-radius: 4px; /* 边框圆角 */
			  font-size: 16px; /* 字体大小 */
			  background-color: rgba(255,255,255,.6);
			}			
			.input_box p {
			  color: red; /* 文字颜色 */
			  margin-top: 5px; /* 上外边距 */
			}			
			.register_check input{
				vertical-align: middle; /* 垂直对齐方式 */
				margin-right: 6px; /* 右外边距 */
				font-size: 16px;
				line-height: 21px;
			}
			.register_check span{
				display: inline-block;
				line-height: 1.5;
			    font-size: 12px;
			    color: #000;
			}
			/* 按钮样式 */
			.register_box .register_btn {
			  padding: 5px 20px; /* 内边距 */
			  background-color: #007bff; /* 背景颜色 */
			  color: #fff; /* 文字颜色 */
			  border: none; /* 边框 */
			  border-radius: 5px; /* 边框圆角 */
			  cursor: pointer; /* 鼠标样式 */
			  font-size: 16px; /* 字体大小 */
			  text-align: center; /* 文本居中 */
			  margin-top: 30px;
			}			
			.register_box .register_btn:hover {
			  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
			  color: #000;
			}
		</style>
	</head>、
	<body>
		<!-- 背景动画
		      占满整个屏幕-->
		<div class="video-wrap">
			<video class="video-wrap__video"
			       src="https://qq-web.cdn-go.cn/zc.qq.com/4d95beda/v3/img/bg-video.mp4" tabindex="-1" airplay="allow" 
				   x-webkit-airplay="true" autoplay="" muted="">
			</video>
		</div>
		<!-- 主体部分置于背景动画之上 -->
		<div class="register_box">
			<div class="register_title">
				<p class="p_one">欢迎注册</p>
				<p class="p_two">为每个人提供便利</p>
			</div>
			<div class="register_input">
				<div class="input_box">
					<input type="text" placeholder="昵称">
					<p></p>
				</div>
				<div class="input_box">
					<input type="password" placeholder="密码">
					<p></p>
				</div>
				<div class="input_box">
					<input type="tel" placeholder="手机号码">
					<p></p>
				</div>
			</div>
			<div class="register_check">
				<input style="opacity: inherit;" accept=""name="checkbox" type="checkbox" >
				<label>我已阅读并同意服务协议</label>
			</div>
			<div class="register_btn" onclick="tologin()">
				<p>立即注册</p>
			</div>
		</div>
	</body>
	<script>
		function tologin(){
			console.log("aa")
			window.location.href="Login.html";
		}
	</script>
</html>